<template>
    <el-row class="Headrow1"  type="flex" justify="center">
        <el-col :span="10" class="Headdiv1col1"></el-col>
        <el-col :span="10" class="Headdiv1col1">
            <div class="OLcol1div1">
                <span class="div1span1" @click="gomain"><i class="el-icon-house"></i>主页</span>
                <span class="div1span1" @click="gomine"><i class="el-icon-user"></i>我的</span>
                <span class="div1span1" @click="gocart"><i class="el-icon-goods"></i>购物车</span>
                <span class="div1span1" @click="goorder"><i class="el-icon-tickets"></i>我的订单</span>
            </div>
        </el-col>
        <el-col :span="4" class="Headdiv1col1"></el-col>
    </el-row>
</template>

<script>
    export default {
        name:'XiaoHUp',
        methods:{
            gomain(){this.$router.push({name:'xHomepage'})},
            gomine(){this.$router.push({name:'xperMain'})},
            gocart(){this.$router.push({name:'xCart'})},
            goorder(){this.$router.push({name:'xOrderList'})},
        },
    }
</script>

<style scoped>
.Headrow1{
    margin: 0px auto;
    width: 100;
    text-align: center;
    font-size: 12px;
}
.Headdiv1col1{
    height: 26px;
    background-color: rgb(240, 240, 240);
}
.OLcol1div1{
    float: right;
    margin-top: 5px;
    color: rgb(48, 48, 48);
}
.OLcol1div1 :hover{
    color: rgb(235, 82, 108);
}
.div1span1{
    cursor: pointer;
    margin-left: 20px;
}
</style>